<template>
	<view class="page">
		<template>
			<view class="flex item-center justify-between top" :class="status !== 1 ? 'close' : ''">
				<view class="flex item-center">
					<image v-if="status !== 1" class="size-20 mr-8" src="@/pagesJ/static/icon-mall-disabled.svg"></image>
					<image v-else class="size-20 mr-8" src="@/pagesJ/static/icon-mall.svg"></image>
					<view>积分商城{{ status !== 1 ? '已关闭' : '开启中' }}</view>
				</view>
				<view v-if="status === 1" class="release-btn close" @click="closeMall">关闭</view>
			</view>
			<view class="step-wrapper">
				<view class="title mb-16">积分获得方式</view>
				<view>
					<view class="mb-16 flex item-center justify-between">
						<view>每消费<text class="color-primary">1</text>元，奖励<text class="color-primary">{{ settingData.consume }}</text>积分</view>
						<image src="@/pagesJ/static/icon-edit.svg" class="size-16" @click="edit('consume', '每消费1元')"></image>
					</view>
					<view class="mb-16 flex item-center justify-between">
						<view>首次订阅，奖励<text class="color-primary">{{settingData.firstSubscription}}</text>积分</view>
						<image src="@/pagesJ/static/icon-edit.svg" class="size-16" @click="edit('firstSubscription', '首次订阅')"></image>
					</view>
					<view class="mb-16 flex item-center justify-between">
						<view>每获得<text class="color-primary">1</text>元佣金，奖励<text class="color-primary">{{settingData.distribution}}</text>积分</view>
						<image src="@/pagesJ/static/icon-edit.svg" class="size-16" @click="edit('distribution', '每获得1元佣金')"></image>
					</view>
					<view class="mb-16 flex item-center justify-between">
						<view>转发活动<text class="color-primary">1</text>次，奖励<text class="color-primary">{{settingData.shareActive}}</text>积分</view>
						<image src="@/pagesJ/static/icon-edit.svg" class="size-16" @click="edit('shareActive', '转发活动1次')"></image>
					</view>
					<view class="flex item-center justify-between">
						<view>活动转发次数，每日<text class="color-primary">{{settingData.shareDailyLimit}}</text>次</view>
						<image src="@/pagesJ/static/icon-edit.svg" class="size-16" @click="edit('shareDailyLimit', '活动转发次数')"></image>
					</view>
				</view>
			</view>
			<view class="step-wrapper">
				<view class="title">设置优惠券</view>
				<view v-for="(item,index) in couponList" :key="index" class="coupon-item flex justify-between item-center mt-16 px-12 py-14">
					<view class="left flex-col color-primary">
						<view class="fs-20 text-center"><text class="fs-12">¥</text>{{ item.amount }}</view>
						<view class="fs-10 text-center">{{ item.fullAmount == 0 ? `无门槛券` : `满${item.fullAmount}元可用` }}</view>
					</view>
					<view class="right ml-24 flex justify-between item-center">
						<view class="flex-col fs-12 text-color-hint">
							<view class="fs-16 font-bold c3">{{ item.goodsName }}</view>
							<view class="color-secondary-warning">{{ item.requiredPoints }}积分兑换</view>
							<view>共{{item.totalNum}}张，剩{{item.remainNum}}张</view>
							<view>兑换后{{item.dayLimit}}天内有效</view>
						</view>
						<view class="flex-col">
							<view class="coupon-btn mb-8" @click="editCoupon(item)">修改</view>
							<view class="coupon-btn" @click="delProduct(item.id)">删除</view>
						</view>
					</view>
				</view>
				<view class="callback-btn inner-btn" @click="addCoupon">+ 添加优惠券</view>
			</view>
			<view class="step-wrapper">
				<view class="title mb-16">设置核销商品</view>
				<view v-for="(item,index) in goodsList" :key="index" class="goods-item flex justify-between item-center py-14 pr-12">
					<view class="left">
						<image :src="firstImage(item.goodsImages)"></image>
					</view>
					<view class="right ml-12 flex justify-between item-center">
						<view class="flex-col fs-12 text-color-hint justify-between">
							<view class="fs-14 font-bold c3 mb-2">{{item.goodsName}}</view>
							<view><text class="color-secondary-warning">{{item.requiredPoints}}</text>积分 <text class="text-throughline">¥{{item.amount}}</text></view>
							<view>共计{{item.totalNum}}件，剩余{{item.remainNum}}件</view>
						</view>
						<view class="flex-col flex-shrink ml-10">
							<view class="coupon-btn mb-8" @click="editGoods(item.id)">修改</view>
							<view class="coupon-btn" @click="delProduct(item.id)">删除</view>
						</view>
					</view>
				</view>
				<view class="callback-btn inner-btn" @click="addGoods">+ 添加核销商品</view>
			</view>
			<view v-if="status !== 1" class="btn-box flex item-center justify-between">
				<view class="callback-btn" style="width: 44%;" @click="cancel">取消</view>
				<view class="release-btn" style="width: 44%;" @click="confirm">确认重启</view>
			</view>
		</template>
		<couponPopup ref="couponDialog" @refresh="getContent" />
		<editPopup ref="editDialog" @confirm="saveSettings" />
	</view>
</template>

<script setup>
	import {onShow,onShareAppMessage} from '@dcloudio/uni-app';
	import {ref,onMounted} from 'vue'
	import couponPopup from './components/couponPopup.vue';
	import editPopup from './components/editPopup.vue';
	import {isVideoFile} from '@/utils/index.js'
	import {saveSettingsApi, myProductListApi, removeProductApi, getSettingsApi, openApi, closeApi, getHomePageApi} from '@/pagesJ/api/index.js'
	import {useUserStore} from '@/stores/modules/user.js'
	const userStore = useUserStore()
	const settingData = ref({
		consume: 1,
		firstSubscription: 1,
		distribution: 1,
		shareActive: 1,
		shareDailyLimit: 2
	})
	const couponDialog = ref(null)
	const editDialog = ref(null)
	const couponList = ref([])
	const goodsList = ref([])
	const status = ref('')
	const firstImage = (list) => {
		return list.find(item => !isVideoFile(item))
	}
	const edit = (str, text) => {
		editDialog.value.showPop(true, {str, text, value: settingData.value[str]})
	}
	const saveSettings = (str, value) => {
		let data = JSON.parse(JSON.stringify(settingData.value))
		data[str] = value
		saveSettingsApi(data).then(res => {
			editDialog.value.showPop()
			getSettings()
		})
	}
	
	const addGoods = () => {
		uni.navigateTo({
			url: `/pagesJ/integralSetting/add-goods`
		})
	}
	const addCoupon = () => {
		couponDialog.value.showPop(true)
	}
	const editCoupon = (item) => {
		couponDialog.value.showPop(true, item)
	}
	const delProduct = (id) => {
		removeProductApi({id}).then(res => {
			uni.showToast({
				title: '删除成功',
				icon: 'none'
			})
			getCouponList()
			getGoodsList()
		})
	}
	const editGoods = (id) => {
		uni.navigateTo({
			url: `/pagesJ/integralSetting/add-goods?id=${id}`,
		})
	}
	const getCouponList = () => {
		myProductListApi({productType: 1}).then(res => {
			couponList.value = res
		})
	}
	const getGoodsList = () => {
		myProductListApi({productType: 2}).then(res => {
			goodsList.value = res
		})
	}
	const getSettings = () => {
		getSettingsApi().then(res => {
			settingData.value = res
		})
	}
	const getHomePage = (id) => {
		getHomePageApi({id}).then(res => {
			status.value = res.pointsMallState
		})
	}
	const cancel = () => {
		uni.navigateBack()
	}
	const confirm = () => {
		uni.showModal({
			title: '确认重启积分商城吗？',
			content: '点击确认后，积分商城将立即生效',
			cancelText: '再想想',
			confirmColor: '#FA4543',
			cancelColor: 'rgba(51, 51, 51, 0.60)',
			success: (res) => {
				if (res.confirm) {
					openApi().then(res => {
						uni.showToast({
							title: '关闭成功',
							icon: 'none'
						})
						userStore.getUserInfo()
						uni.navigateBack()
					})
				}
			}
		})
	}
	const closeMall = () => {
		uni.showModal({
			title: '确认关闭积分商城吗？',
			content: '关闭期间用户不会累计积分，无法兑换奖品，但会保留用户原有积分',
			cancelText: '取消',
			confirmColor: '#FA4543',
			cancelColor: 'rgba(51, 51, 51, 0.60)',
			success: (res) => {
				if (res.confirm) {
					closeApi().then(res => {
						getHomePage(userStore.userInfo.businessInfo.id)
					})
				}
			}
		})
	}
	const getContent = () => {
		getSettings()
		getCouponList()
		getGoodsList()
	}
	onShow(() => {
		getContent()
		getHomePage(userStore.userInfo.businessInfo.id)
	})
</script>

<style lang="scss" scoped>
	.page {
		position: relative;
		width: 100vw;
		min-height: 100vh;
		background-color: #F5F5F5;
		padding-bottom: 90px;
	}
	.top{
		font-size: 14px;
		padding: 6px 16px;
		background: #FFF0EA;
		color: #FA4543;
		margin-bottom: 12px;
		&.close{
			background: #C6C6C6;
			color: white;
		}
	}
	.step-wrapper{
		background: #fff;
		border-radius: 12px;
		margin: 0 10px 16px;
		padding: 16px 12px;
		.title{
			font-weight: 600;
			font-size: 20px;
			color: #333333;
		}
		.order-text{
			font-size: 12px;
			color: rgba(51,51,51,0.6);
		}
		.coupon-item{
			background-image: url("https://huodtg.oss-cn-hangzhou.aliyuncs.com/hd/miniprogram/bg-coupon.png");
			background-repeat: no-repeat;
			background-size: 100%;
			.left{
				width: 68px;
			}
			.right{
				width: 240px;
				.coupon-btn{
					color: #818181;
					font-size: 10px;
					border: 1px solid rgba(51,51,51,0.6);
					border-radius: 4px;
					padding: 2px 12px;
				}
			}
		}
		.goods-item{
			.left{
				position: relative;
				image{
					width: 78px;
					height: 78px;
					border-radius: 12px;
				}
				.stock{
					position: absolute;
					bottom: 0;
					border-radius: 0px 0px 12px 12px;
					background: rgba(51,51,51,0.6);
					width: 100%;
					text-align: center;
					padding: 2px;
					font-size: 12px;
					color: #fff;
				}
			}
			.right{
				width: 240px;
				.coupon-btn{
					color: #818181;
					font-size: 10px;
					border: 1px solid rgba(51,51,51,0.6);
					border-radius: 4px;
					padding: 2px 12px;
				}
			}
		}
	}
	.btn-box {
		position: fixed;
		bottom: 0px;
		left: 0;
		width: 100%;
		z-index: 7;
		padding: 10px 0;
	}
	.release-btn {
		height: 46px;
		padding: 12px, 20px, 12px, 20px;
		border-radius: 8px;
		background: #FA4543;
		color: #ffffff;
		margin: 10px;
		text-align: center;
		line-height: 46px;
		&.close{
			border-radius: 4px;
			height: 24px;
			line-height: 24px;
			font-size: 12px;
			padding: 0 16px;
			margin: 0;
		}
	}
	.callback-btn{
		height: 46px;
		padding: 12px, 20px, 12px, 20px;
		border-radius: 8px;
		background: #ffffff;
		color: #FA4543;
		border: 1px solid #FA4543;
		margin: 10px;
		text-align: center;
		line-height: 46px;
		&.inner-btn{
			margin: 16px 0 0 0;
		}
	}
	.share-btn{
		padding: 2px 12px;
		border-radius: 4px;
		background: #FA4543;
		color: #ffffff;
		margin-right: 8px;
		text-align: center;
	}
</style>